import 'dart:math';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:waterfall_flow/waterfall_flow.dart';
import 'package:xiaogang/pages/xiaogang_home/product_details/product_details_view.dart';

import 'xiaogang_home_logic.dart';

class XiaogangHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final logic = Get.put(XiaogangHomeLogic());
    final state = Get.find<XiaogangHomeLogic>().state;

    return Scaffold(
        appBar: PreferredSize(
          child: AppBar(
            backgroundColor: Colors.white,
            elevation: 0.2,
            leading:
                Icon(Icons.punch_clock_sharp, color: Colors.deepOrangeAccent),
            title: Text("小刚生活",
                style: TextStyle(
                    fontSize: 22,
                    color: Colors.black,
                    fontWeight: FontWeight.w900)),
            centerTitle: true,
            actions: <Widget>[
              Image.asset('assets/images/saoyisao.png', width: 23, height: 23),
              Container(width: 20)
            ],
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Container(
                  margin: EdgeInsets.only(left: 20, right: 20),
                  height: 37,
                  decoration: BoxDecoration(
                      border: Border.all(width: 2, color: Colors.purple),
                      borderRadius: BorderRadius.all(Radius.circular(50))),
                  child: Row(
                    children: <Widget>[
                      SizedBox(width: 10),
                      Icon(Icons.search_rounded),
                      SizedBox(width: 5),
                      Text(
                        '物理长高',
                        style: TextStyle(color: Colors.black45, fontSize: 20),
                      ),
                      Expanded(child: Text('')),
                      Icon(Icons.camera_alt_outlined),
                      SizedBox(width: 10),
                      Container(
                          width: 70,
                          decoration: BoxDecoration(
                              borderRadius:
                                  BorderRadius.all(Radius.circular(50)),
                              color: Colors.purple),
                          child: Center(
                              child: Text('搜索',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w600)))),
                    ],
                  ),
                )),
          ),
          preferredSize: Size.fromHeight(100),
        ),
        body: Container(
          color: Colors.white,
          child: ListView.builder(
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                //小刚优选
                if (index == 0) {
                  return Container(
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                        color: Color(0xfff6f6f6),
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                    child: Column(
                      children: [
                        ListTile(
                          leading: Text(
                            "小刚优选",
                            style: TextStyle(
                                fontSize: 20, fontWeight: FontWeight.w900),
                          ),
                          title: Row(
                            children: [
                              Chip(
                                label: Text(
                                  '全国包邮',
                                  style: TextStyle(fontSize: 11),
                                ),
                                backgroundColor: Colors.amberAccent,
                              ),
                              SizedBox(
                                width: 6,
                              ),
                              Chip(
                                  label: Text(
                                    '假一赔十',
                                    style: TextStyle(fontSize: 11),
                                  ),
                                  backgroundColor: Colors.amberAccent),
                            ],
                          ),
                          trailing: Row(
                            //自适应宽度
                            mainAxisSize: MainAxisSize.min,
                            children: [Text("更多"), Icon(Icons.chevron_right)],
                          ),
                        ),
                        GridView.builder(
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 4, //每行4列
                                    childAspectRatio: 1 //显示区域宽高等

                                    ),
                            itemCount: 4,
                            shrinkWrap: true,
                            physics: ScrollPhysics(),
                            //禁止滑动
                            itemBuilder: (context, index) {
                              return Container(

                                  height: 40,
                                  child: Column(
                                    children: [
                                      Container(
                                        width: 60,
                                        height: 60,
                                        decoration: BoxDecoration(
                                            borderRadius: BorderRadius.all(Radius.circular(50)),
                                            image: DecorationImage(
                                                image: NetworkImage(state.superiorProductImages[index]),
                                              fit: BoxFit.cover,

                                            )
                                        ),
                                      ),
                                      Text(
                                        state.superiorProductTitles[index],
                                        style: TextStyle(
                                            fontSize: 15,
                                            fontWeight: FontWeight.w900),
                                      ),
                                    ],
                                  ));
                            }),
                      ],
                    ),
                  );
                }
                index -= 1;
                return WaterfallFlow.builder(
                    padding: EdgeInsets.all(5.0),
                    gridDelegate:
                        SliverWaterfallFlowDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      crossAxisSpacing: 5.0,
                      mainAxisSpacing: 5.0,
                    ),
                    itemCount: state.commodityImages.length,
                    shrinkWrap: true,
                    physics: ScrollPhysics(),
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        child: Container(

                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.all(Radius.circular(10)),

                            ),

                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [

                              Container(
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(Radius.circular(10)),

                                  ),

                                  child: Image.network(state.commodityImages[index])),
                              Text(
                                state.commodityTitles[index],
                                maxLines: 2,
                              ),

                                  Text(
                                    state.commodityMoneys[index],
                                    style: TextStyle(color: Colors.red),
                                  ),

                            ],
                          ),
                        ),
                        onTap: (){
                          Get.to(ProductDetailsPage(),arguments: index);
                        },
                      );
                    });
              }),
        ));
  }
}
